<template>
  <view class="body">
    <view class="user-info">
      <view class="info">
        <view class="image">
          <image
            class="img"
            v-if="baseInfo && baseInfo.gender == '女性'"
            src="@/static/image/woman.png"
            alt=""
          />
          <image class="img" v-else src="@/static/image/man.png" alt="" />
        </view>
        <view class="min">
          <text class="name">{{ baseInfo && baseInfo.patName }}</text>
          <!-- on  代表不是本人 -->
          <!-- <text v-if="baseInfo && baseInfo.relation == '本人'" class="relationship"
            >本人</text
          >
          <text v-else class="relationship on">配偶</text> -->
          <text
            v-if="baseInfo && baseInfo.relation !== null"
            :class="['relationship', baseInfo && baseInfo.relation == '本人' ? '' : 'on']"
          >
            {{ baseInfo.relation }}
          </text>
        </view>
        <view class="right" @tap="editFun">
          <text class="patient">编辑</text>
        </view>
      </view>
    </view>
    <view class="tabs">
      <view class="tab">
        <text :class="tab == 'base' ? 'active' : ''" @tap="tabChange('base')"> 基本信息 </text>
        <view v-if="tab == 'base'" class="tab_active" />
      </view>
      <view class="tab">
        <text :class="tab == 'medical' ? 'active' : ''" @tap="tabChange('medical')">
          医疗信息
        </text>
        <view v-if="tab == 'medical'" class="tab_active" />
      </view>
    </view>
    <view class="info_content">
      <view v-if="tab == 'base'" class="info">
        <view class="cell">
          <view class="title">姓名</view>
          <view class="content">{{ baseInfo.patName }}</view>
        </view>
        <view class="cell">
          <view class="title">证件号</view>
          <view class="content">{{ baseInfo.idNo }}</view>
        </view>
        <view class="cell">
          <view class="title">性别</view>
          <view class="content">{{ baseInfo.gender }}</view>
        </view>
        <view class="cell">
          <view class="title">年龄</view>
          <view class="content">{{ baseInfo.age }}岁</view>
        </view>
        <!-- <view class="cell">
                    <view class="title">出生年月</view>
                    <view class="content">{{ baseInfo.birthday || '暂无' }}</view>
                </view> -->
        <view class="cell">
          <view class="title">手机号</view>
          <view class="content">{{ baseInfo.phone || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">地址</view>
          <view class="content">{{
            baseInfo.addressProvince
              ? `${baseInfo.addressProvince}-${baseInfo.addressCity}-${baseInfo.addressCountry}`
              : '暂无'
          }}</view>
        </view>
        <view class="cell" style="flex-direction: column">
          <view class="title">详细地址</view>
          <view class="content" style="width: 100%; margin-top: 36rpx; text-align: left">{{
            baseInfo.address || '暂无'
          }}</view>
        </view>
        <view class="cell">
          <view class="title">ABO血型</view>
          <view class="content">{{ baseInfo.abo || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">Rh血型</view>
          <view class="content">{{ baseInfo.rh || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">医疗支付方式</view>
          <view class="content">{{ baseInfo.medicare || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">婚姻状况</view>
          <view class="content">{{ baseInfo.marital || '暂无' }}</view>
        </view>
        <!-- <view class="cell">
          <view class="title">常住类型</view>
          <view class="content">暂无</view>
        </view> -->
        <view class="cell">
          <view class="title">民族</view>
          <view class="content">{{ baseInfo.nation || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">文化程度</view>
          <view class="content">{{ baseInfo.education || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">职业类别</view>
          <view class="content">{{ baseInfo.occupation || '暂无' }}</view>
        </view>
        <view class="cell" style="border-bottom-width: 0">
          <view class="title">联系人信息</view>
        </view>
        <view class="cell">
          <view class="title">联系人关系</view>
          <view class="content">{{ baseInfo.contactRelation || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">联系人姓名</view>
          <view class="content">
            {{ baseInfo.contactName || '暂无' }}
          </view>
        </view>
        <view class="cell">
          <view class="title">联系人电话</view>
          <view class="content">
            {{ baseInfo.contactPhone || '暂无' }}
          </view>
        </view>
      </view>

      <MedicalInfo v-if="tab == 'medical'" :result="medicalInfo" :baseData="baseInfo" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import MedicalInfo from './medicalInfo.vue'
import { base_info, history } from '@/api/moreMessage'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getMedicalInfo } from './moreMessage.api'

const tab = ref('base')
const show = ref(false)
const popType = ref('')
const baseInfo = ref({})
const medicalInfo: any = ref({
  familyHisList: [],
  elapseHisList: [],
  allergyHisList: [],
  hurtHisList: [],
  periodData: [],
  marriageData: [],
  first_period_age: 0,
  period_circle: 0,
  period_duration: 0,
  if_menopause: '',
  menopause_age: 0,
  marriage_status: '',
  fertility_status: '',
  pregnancy_count: 0,
  birth_count: 0,
  miscarriage_count: 0,
  stillbirth_count: 0,
  cesarean_section_count: 0,
  vaginal_birth_count: 0
})

const userInfo = ref()
const empi = ref('')

onLoad((option) => {
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  // type.value = option.empi ? 'body' : ''
  // empi.value = option.empi ? option.empi : ''
})

onShow(() => {
  // empi.value = JSON.parse(uni.getStorageSync('userInfo')).empi
  init()

  if (tab.value == 'medical') {
    getHistory()
  }
})

const tabChange = (item: string) => {
  tab.value = item
  if (tab.value == 'medical') {
    getHistory()
  }
}

const editFun = () => {
  uni.navigateTo({
    url: '/packA/pages/moreMessage/editIndex?empi=' + userInfo.value.empi
  })
}
const showPop = (val) => {
  popType.value = val
  show.value = true
}
const init = () => {
  base_info({
    userId: uni.getStorageSync('userInfo').userId,
    empi: userInfo.value.empi
  }).then((res) => {
    baseInfo.value = res.data
  })
  if (baseInfo.value.contactName) {
    baseInfo.value.contacts =
      baseInfo.value.contactName +
      ' ' +
      baseInfo.value.contactRelation +
      ' ' +
      baseInfo.value.contactPhone
  }
}
const getHistory = () => {
  medicalInfo.value = {
    familyHisList: [],
    elapseHisList: [],
    allergyHisList: [],
    hurtHisList: [],
    periodData: [],
    marriageData: [],
    first_period_age: 0,
    period_circle: 0,
    period_duration: 0,
    if_menopause: '',
    menopause_age: 0,
    marriage_status: '',
    fertility_status: '',
    pregnancy_count: 0,
    birth_count: 0,
    miscarriage_count: 0,
    stillbirth_count: 0,
    cesarean_section_count: 0,
    vaginal_birth_count: 0
  }
  getMedicalInfo({ empi: baseInfo.value.empi }).then((res) => {
    res.data.forEach((vo) => {
      if (vo.extKey == 'family') {
        medicalInfo.value.familyHisList = vo.extValue.split('#')
      }
      if (vo.extKey == 'disease') {
        medicalInfo.value.elapseHisList = vo.extValue.split('#')
      }

      if (vo.extKey == 'allergy') {
        medicalInfo.value.allergyHisList = vo.extValue.split('#')
      }

      if (vo.extKey == 'trauma') {
        medicalInfo.value.hurtHisList = vo.extValue.split('#')
      }

      if (vo.extKey == 'first_period_age') {
        medicalInfo.value.periodData.push(`初次月经${vo.extValue}岁`)
        medicalInfo.value.first_period_age = vo.extValue
      }

      if (vo.extKey == 'period_circle') {
        medicalInfo.value.periodData.push(`月经周期${vo.extValue}天`)
        medicalInfo.value.period_circle = vo.extValue
      }

      if (vo.extKey == 'period_duration') {
        medicalInfo.value.periodData.push(`月经持续${vo.extValue}天`)
        medicalInfo.value.period_duration = vo.extValue
      }

      if (vo.extKey == 'if_menopause') {
        medicalInfo.value.periodData.push(`${vo.extValue == '是' ? '已绝经' : '未绝经'}`)
        medicalInfo.value.if_menopause = vo.extValue
      }

      if (vo.extKey == 'menopause_age') {
        medicalInfo.value.periodData.push(`${vo.extValue}岁绝经`)
        medicalInfo.value.menopause_age = vo.extValue
      }

      if (vo.extKey == 'marriage_status') {
        medicalInfo.value.marriageData.push(vo.extValue)
        medicalInfo.value.marriage_status = vo.extValue
      }
      if (vo.extKey == 'fertility_status') {
        medicalInfo.value.marriageData.push(vo.extValue)
        medicalInfo.value.fertility_status = vo.extValue
      }
      if (vo.extKey == 'pregnancy_count') {
        medicalInfo.value.marriageData.push(`妊娠${vo.extValue}次`)
        medicalInfo.value.pregnancy_count = vo.extValue
      }
      if (vo.extKey == 'birth_count') {
        medicalInfo.value.marriageData.push(`生育${vo.extValue}次`)
        medicalInfo.value.birth_count = vo.extValue
      }
      if (vo.extKey == 'miscarriage_count') {
        medicalInfo.value.marriageData.push(`流产${vo.extValue}次`)
        medicalInfo.value.miscarriage_count = vo.extValue
      }
      if (vo.extKey == 'stillbirth_count') {
        medicalInfo.value.marriageData.push(`死产${vo.extValue}次`)
        medicalInfo.value.stillbirth_count = vo.extValue
      }
      if (vo.extKey == 'cesarean_section_count') {
        medicalInfo.value.marriageData.push(`剖腹产${vo.extValue}次`)
        medicalInfo.value.cesarean_section_count = vo.extValue
      }
      if (vo.extKey == 'vaginal_birth_count') {
        medicalInfo.value.marriageData.push(`顺产${vo.extValue}次`)
        medicalInfo.value.vaginal_birth_count = vo.extValue
      }
    })
  })
}
</script>

<style lang="scss" scoped>
.body {
  .user-info {
    width: 100%;
    background-color: #fff;

    .info {
      position: relative;
      z-index: 2;
      display: inline-block;
      width: calc(100% - 64rpx);
      margin: 32rpx 32rpx 24rpx;

      .image {
        position: relative;
        display: inline-block;
        width: 96rpx;
        height: 96rpx;
        vertical-align: middle;

        .img {
          display: block;
          width: 100%;
          height: 100%;
        }

        .isVip {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

      .min {
        display: inline-block;
        margin-left: 24rpx;
        vertical-align: middle;

        .name {
          display: block;
          font-size: 36rpx;
          font-weight: 700;
          color: #222;
        }

        .relationship {
          display: inline-block;
          padding: 2rpx 24rpx;
          margin-top: 12rpx;
          font-size: 24rpx;
          color: #fff;
          background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
          border-radius: 18rpx 4rpx;

          &.on {
            background: #5c8eff;
          }
        }
      }

      .right {
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        width: 116rpx;
        height: 56rpx;
        text-align: center;
        background: #fff;
        border: 1rpx solid #00d1b6;
        border-radius: 28rpx;

        .patient {
          display: inline-block;
          height: auto;
          font-size: 26rpx;
          line-height: 56rpx;
          color: #00d1b6;
          vertical-align: middle;
        }

        .switch {
          display: inline-block;
          width: 24rpx;
          height: 24rpx;
          margin-left: 8rpx;
          vertical-align: middle;
        }
      }
    }
  }

  .tabs {
    width: 100%;
    height: 100rpx;
    background: #fff;

    .tab {
      display: inline-block;
      height: 100rpx;
      padding: 0 32rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #666;

      text {
        display: block;
        height: 95rpx;
        line-height: 95rpx;
      }

      .active {
        font-size: 36rpx;
        font-weight: 700;
        color: #222;
      }

      .tab_active {
        width: 24rpx;
        height: 6rpx;
        margin: 0 auto;
        background: #00d1b6;
        border-radius: 4rpx;
      }
    }
  }

  .info_content {
    height: calc(100vh - 288rpx);
    padding: 32rpx;
    overflow: auto;

    .info {
      padding: 0 32rpx;
      background: #fff;
      border-radius: 12rpx;

      .cell {
        display: flex;
        justify-content: space-between;
        padding: 34rpx 0;
        border-bottom: 1rpx solid #e5e6eb;

        .title {
          font-size: 30rpx;
          font-weight: 700;
          color: #333;
        }

        .content {
          width: 400rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #222;
          text-align: right;

          .more {
            width: 40rpx;
            height: 40rpx;
            transform: translateY(10rpx);
          }
        }
      }

      .cell:last-child {
        border: none;
      }
    }

    .u-popup {
      .title {
        height: 108rpx;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 108rpx;
        color: #222;
        text-align: center;
      }

      .lists {
        box-sizing: border-box;
        width: 640rpx;
        max-height: 500rpx;
        padding: 0 40rpx;
        margin-bottom: 40rpx;
        overflow: auto;

        .address_item {
          margin-bottom: 40rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #666;

          .item_top {
            margin-bottom: 20rpx;
          }
        }

        .contact_item {
          display: flex;
          justify-content: flex-start;
          padding-left: 58rpx;
          margin-bottom: 40rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #666;

          .name {
            width: 20%;
          }

          .relation {
            width: 20%;
            margin-left: 40rpx;
          }

          .phone {
            width: 50%;
            margin-left: 40rpx;
          }
        }

        .contact_item:last-child {
          margin-bottom: 0 !important;
        }
      }
    }
  }
}

::v-deep .u-icon__icon {
  top: 16rpx !important;
  font-size: 40rpx !important;
}

::v-deep .u-safe-area-inset-bottom {
  padding-bottom: 0 !important;
}
</style>
